<template>
    <span>
        <Button type="default" size="small" @click="handleCmdInfoShow(data)">详情</Button>
        <Modal v-model="cmd_info_modal" title="命令详情" :width="75">
            <Form :model="cmd_current" :label-width="80">
                <FormItem label="设备ID">
                    <ClientLabel :client_id="cmd_current.client_id"></ClientLabel>
                </FormItem>
                <FormItem label="命令">
                    <span>{{ data.create_time }}</span>
                    <div style="margin-bottom: 5px;min-height: 10vh;max-height:50vh;overflow-y: auto;border: 1px solid #dcdee2;border-radius: 4px;padding: 5px;background:#e7f1fc">
                        <pre style="line-height: 24px;margin:0px;"><code v-html="cmd_current.cmd"></code></pre>
                    </div>
                </FormItem>
                <FormItem label="执行结果">
                    <span>{{ data.result_time }}</span>
                    <div style="margin-bottom: 5px;min-height: 10vh;max-height:50vh;overflow-y: auto;border: 1px solid #dcdee2;border-radius: 4px;padding: 5px;background:#e7f1fc">
                        <pre style="line-height: 24px;margin:0px;"><code v-html="cmd_current.result"></code></pre>
                    </div>
                </FormItem>
                <FormItem label="执行状态">
                    <Tag v-if="cmd_current.complete == 0">未执行</Tag>
                    <Tag v-else-if="cmd_current.complete == 1" color="success">执行完毕</Tag>
                </FormItem>
            </Form>
        </Modal>
    </span>
</template>

<script>
import ClientLabel from './ClientLabel.vue';

export default {
    name: 'CmdInfoButton',
    components: {
        ClientLabel
    },
    props: {
        data: Object
    },
    data() {
        return {
            cmd_info_modal: false,
            cmd_current: {
                cmd_id: 0,
                client_id: 0,
                cmd: '',
                result: '',
                complete: 0,
            }
        }
    },
    methods: {
        handleCmdInfoShow(row) {
            this.cmd_current.cmd_id = row.cmd_id;
            this.cmd_current.client_id = row.client_id;
            this.cmd_current.cmd = row.cmd;
            this.cmd_current.result = row.result;
            this.cmd_current.complete = row.complete;
            this.cmd_info_modal = true;
        },
    }
}
</script>